<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
</body>
<script>

    // 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题

    let {createApp} = Vue;
    let {ref,reactive,computed} = Vue;
    let {unref,toRaw,markRaw} = Vue;
    let {isRef} = Vue;


    let app = createApp({
        setup(props) {
            let count = ref(10);
            let doubleCount = computed(()=>count.value*2);

            let zhang = reactive({name:"张三",age:18,info:{height:177,weight:70}});

            console.log(isRef(count));
            console.log(isRef(doubleCount));

           

         
            return {
               
            }
        },
        mounted() {
            console.log("代理对象,this",this);

        },
    })


    app.mount("#app");


</script>

</html>